<template>
    <!-- 仪表板 -->
    <div class="meterIndex">
        <div class="top_operation_first">
            <!-- 顶部四级联动选择器联动组件 -->
            <div class="every_operation" v-if="isRegionShow">
                <span><b style="color:red;">*</b> 大区：</span>
                <a-select
                    show-search
                    :filter-option="filterOption"
                    style="width: 195px" 
                    @change="regionChange" 
                    v-model="regionId" 
                >
                    <a-select-option :key="index" v-for="(item, index) in regionList" :value="item.id">
                        {{item.name}}
                    </a-select-option>
                </a-select>
            </div>
            <div class="every_operation" v-if="isCityShow">
                <span><b style="color:red;">*</b> 城市：</span>
                <a-select 
                    show-search
                    :filter-option="filterOption"
                    style="width: 195px" 
                    @change="cityChange" 
                    v-model="cityId"
                >
                    <a-select-option :key="index" v-for="(item, index) in cityList" :value="item.id">
                        {{item.name}}
                    </a-select-option>
                </a-select>
            </div>
            <div class="every_operation" v-if="isWareShow">
                <span><b style="color:red;">*</b> 仓库：</span>
                <a-select
                    show-search
                    :filter-option="filterOption" 
                    style="width: 195px" 
                    @change="warehouseChange" 
                    v-model="organizeId"
                >
                    <a-select-option :key="index" v-for="(item, index) in warehouseList" :value="item.id">
                        {{item.name}}
                    </a-select-option>
                </a-select>
            </div>
            <div class="every_operation">
                <span>仪表板：</span>
                <a-input placeholder="请输入" v-model="meterName" style="width:195px;"/>
            </div>
            <div class="button_div">
                <a-button type="primary" icon="search" @click="onSearch()">搜索</a-button>
                <a-button type="primary" icon="sync" style="margin-left:20px;" @click="onReset()">重置</a-button>
            </div>
        </div>

        
        <div class="select_number">
            <span class="number_span">已选择<b>{{selectNumber}}</b>项</span>
            <span class="clear_span" @click="clearSelect">清空</span>
        </div>
        <!-- 顶部操作块 -->
        <div class="top_operation">
            <div class="new_meter" @click="newMeter()">
                <img src="~@/assets/file_green.png" alt="仪表板">
                新建仪表板
            </div>
            <!-- 新建仪表板对话框 -->
            <a-modal
                title="新建仪表板"
                :visible="visible"
                :confirm-loading="confirmLoading"
                @ok="handleOk"
                @cancel="handleCancel"
            >
                <div style="margin-bottom:10px;">
                    <span>名称：</span>
                    <input type="text" style="width:360px;height:30px;border:1px solid #9ea6b2;" v-model="nameText">
                </div>
                <div>
                    <span>位置：</span>
                    <a-tree-select
                        v-model="treeValue"
                        style="width:360px;"
                        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                        placeholder="Please select"
                        allow-clear
                        tree-default-expand-all
                        :treeData="treeData"
                        :replaceFields="treeReplaceFields"
                        @change="treeChange"
                    >
                    </a-tree-select>
                </div>
            </a-modal>
            <div class="new_folder" @click="newFolder()">
                <img src="~@/assets/folder.png" alt="文件">
                新建文件夹
            </div>
            <!-- 新建文件夹对话框 -->
            <a-modal
                title="新建文件夹"
                :visible="folderVisible"
                :confirm-loading="folderConfirmLoading"
                @ok="folderHandleOk"
                @cancel="folderHandleCancel"
            >
                <div style="margin-bottom:10px;">
                    <span>名称：</span>
                    <input type="text" style="width:360px;height:30px;border:1px solid #9ea6b2;" v-model="folderNameText">
                </div>
                <div>
                    <span>位置：</span>
                    <a-tree-select
                        v-model="treeValue"
                        style="width:360px;"
                        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                        placeholder="Please select"
                        allow-clear
                        tree-default-expand-all
                        :treeData="treeData"
                        :replaceFields="treeReplaceFields"
                        @change="treeChange"
                    >
                    </a-tree-select>
                </div>
            </a-modal>
            <a-button style="margin:9px 0 0 20px;" v-if="deletdBtnShow" @click="batchMoveRow()">批量移动</a-button>
            <a-button style="margin:9px 0 0 20px;" v-if="deletdBtnShow" @click="batchDelete()">批量删除</a-button>
            </div>
            <!-- 排序操作块 -->
            <div class="sort_operation">
                <div class="file_path">
                    <span>全部文件</span>
                </div>
            </div>
            <!-- 仪表板列表 -->
            <div class="meter_list">
            <!-- childrenColumnName="chartCatalogList" -->
            <a-table 
                :loading="tableLoading"
                :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
                :columns="columns" 
                :data-source="data" 
                :pagination="false" 
                bordered
                rowKey="id"
                childrenColumnName="chartCatalogList"
                :expandIcon="expandIcon"
            >
                <a slot="name" slot-scope="text, record" href="javascript:;">
                    <span @click="lookRow(record)" style="color:#595959;">{{text}}</span>
                </a>

                <a slot="action" slot-scope="text, record" href="javascript:;">
                    <span style="margin-right:8px;" @click="renameRow(record)">重命名</span>

                    <a-dropdown>
                        <a class="ant-dropdown-link" @click="e => e.preventDefault()">
                            更多 <a-icon type="down" />
                        </a>
                        <a-menu slot="overlay">
                            <a-menu-item>
                                <span v-if="record.type === '1'" @click="detailsRow(record)" style="margin-right:8px;">编辑</span>
                            </a-menu-item>
                            <a-menu-item>
                                <span style="margin-right:8px;" @click="moveRow(record)">移动</span>
                            </a-menu-item>
                            <a-menu-item>
                                <span style="margin-right:8px;" @click="deleteRow(record)">删除</span>
                            </a-menu-item>
                            <a-menu-item>
                                <span v-if="record.type === '1' && record.isHomepage !== 1" style="margin-right:8px;" @click="setHomepage(record)">设为首页</span>
                            </a-menu-item>
                        </a-menu>
                    </a-dropdown>

                    <img src="~@/assets/home.png" alt="首页" style="width:20px;margin-left:8px;margin-top:-5px;" v-if="record.isHomepage === 1">
                
                </a>
            </a-table>
            <!-- 底部分页组件 -->
            <!-- <BottomPagination
                :total="total"
                @pageChange="pageChange"
                @sizeChange="sizeChange"
            ></BottomPagination> -->
            <!-- 重命名当前行对话框 -->
            <a-modal
                title="重命名"
                :visible="renameVisible"
                :confirm-loading="renameConfirmLoading"
                @ok="renameHandleOk"
                @cancel="renameHandleCancel"
            >
                <span>名称：</span>
                <input type="text" style="width:360px;border: 1px solid #9ea6b2;" v-model="renameText">
            </a-modal>
            <!-- 删除当前行对话框 -->
            <a-modal
                title="删除"
                :visible="deleteVisible"
                :confirm-loading="deleteConfirmLoading"
                @ok="deleteHandleOk"
                @cancel="deleteHandleCancel"
            >
                <p style="text-align:center;">确认删除？</p>
            </a-modal>
            <!-- 批量删除对话框 -->
            <a-modal
                title="批量删除"
                :visible="batchDeleteVisible"
                :confirm-loading="batchDeleteConfirmLoading"
                @ok="batchDeleteHandleOk"
                @cancel="batchDeleteHandleCancel"
            >
                <p style="text-align:center;">确认删除？</p>
            </a-modal>
            <!-- 移动文件夹仪表板对话框 -->
            <a-modal
                title="移动"
                :visible="moveVisible"
                :confirm-loading="moveConfirmLoading"
                @ok="moveHandleOk"
                @cancel="moveHandleCancel"
            >
                <div>
                    <span>位置：</span>
                    <a-tree-select
                        v-model="treeValue"
                        style="width:360px;"
                        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                        placeholder="Please select"
                        allow-clear
                        tree-default-expand-all
                        :treeData="treeData"
                        :replaceFields="treeReplaceFields"
                        @change="treeChange"
                    >
                    </a-tree-select>
                </div>
            </a-modal>
        </div>
    </div>
</template>

<script>
    // 定义列表假数据
    const columns = [
        {
            title: '名称',
            dataIndex: 'name',
            key: 'name',
            scopedSlots: { 
                customRender: 'name' 
            },
        },
        {
            title: '最后修改时间',
            dataIndex: 'updateTime',
            key: 'updateTime',
            width: '15%',
            align: 'center',
        },
        { 
            title: '操作', 
            dataIndex: '', 
            key: 'x', 
            scopedSlots: { 
                customRender: 'action' 
            },
            width: '12%',
            align: 'center',
        },
    ];
  
import TopSelect from './TopSelect'
import BottomPagination from './BottomPagination'
import { getHierarchy, createMeter, deleteMeter, updateMeter, getHeadquarters, getRegion, getCity, getWarehouse, setHomepage } from '@/api/api'

export default {
    inject: [ 'reload' ],
    name: "MeterIndex",
    components: {
    TopSelect,
    BottomPagination     
    },
    
    data () {
        return {
            meterName: '', // 仪表板名称
            grade: 0, // 层级
            code: '', // 编码
            parentId: '',
            data: [],
            treeData: [],
            columns,
            tableLoading: false,
            visible: false, // 新建仪表板
            confirmLoading: false,
            nameText: '', // 仪表板名称
            treeValue: '',
            treeReplaceFields: {
                key: 'id',
                title:'name',
                value: 'id',
                children: 'chartCatalogList',
            },
            folderVisible: false, // 新建文件夹
            folderConfirmLoading: false,
            folderNameText: '', // 文件夹名称
            renameVisible: false, // 重命名当前行
            renameConfirmLoading: false, 
            renameText: '', // 重命名
            deleteVisible: false, // 删除当前行
            deleteConfirmLoading: false, 
            headquartersId: '', // 总部id
            regionId: '', // 大区id
            cityId: '', // 城市id
            organizeId: '', // 仓库id
            regionList: [],
            cityList: [],
            warehouseList: [],
            isRegionShow: false,
            isCityShow: false,
            isWareShow: false,
            pageNo: 1,
            pageSize: 10,
            total: 0,
            selectNumber: 0, // 当前选中数据条数
            selectedRowKeys: [], // 当前选择集合
            deletdBtnShow: false, // 批量删除按钮是否显示
            batchDeleteVisible: false, // 批量删除
            batchDeleteConfirmLoading: false,
            moveVisible: false, // 移动
            moveConfirmLoading: false,
            replaceFields: {
                title:'name', 
                key:'id',
            },
            type: 0,
            ids: '',
        }
    },
    beforeRouteEnter(to, from, next) {
        next(vm=>{
            // 因为总部、大区、城市指标设置是共用一个页面，所以自己跳自己的时候需要调用reload()刷新页面
            if(from.path === '/headquartersmsg/meter' || from.path === '/regionmsg/meter' || from.path === '/citymsg/meter' || from.path === '/warehousemsg/meter'){
                vm.reload()
            }
        })
    },
    created() {
        if(this.$route.path === '/headquartersmsg/meter'){
            this.grade = 0
            this.isRegionShow = false
            this.isCityShow = false
            this.isWareShow = false
        }else if(this.$route.path === '/regionmsg/meter'){
            this.grade = 1
            this.isRegionShow = true
            this.isCityShow = false
            this.isWareShow = false
        }else if(this.$route.path === '/citymsg/meter'){
            this.grade = 2
            this.isRegionShow = true
            this.isCityShow = true
            this.isWareShow = false
        }else{
            this.grade = 3
            this.isRegionShow = true
            this.isCityShow = true
            this.isWareShow = true
        }
        this.getHeadquartersList()
    },
    methods: {
        // 选择框过滤
        filterOption(input, option) {
            return (
                option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
            );
        },
        // 获取总部
        getHeadquartersList(){
            let params = {}
            getHeadquarters(params).then((res)=>{
                if(res.success){
                    this.headquartersId = res.result.organizeOrgList[0].id
                    this.code = res.result.organizeOrgList[0].code
                    this.getRegionList()
                    if(this.grade === 0){
                        this.getHierarchy()
                        this.getTree()
                    }
                }
            })
        },
        // 获取大区
        getRegionList(){
            let params = {id: this.headquartersId}
            getRegion(params).then((res)=>{
                if(res.success){
                    this.regionList = res.result.organizeOrgList
                    if(this.regionList.length === 1){
                        this.regionId = res.result.organizeOrgList[0].id
                        this.code = res.result.organizeOrgList[0].code
                        if(this.grade === 1){
                            this.getHierarchy()
                            this.getTree()
                        }
                        if(this.grade === 2 || this.grade === 3){
                            this.getCityList()
                        }
                    }
                }else{
                    this.$message.warning(res.message, 6)
                }
            })
        },
        // 选择大区
        regionChange(value){
            this.regionId = value
            for(var item of this.regionList) {
                if(item.id === this.regionId) {
                    this.code = item.code
                }
            }

            if(this.grade === 2 || this.grade === 3){
                this.getCityList()
            }
            
            this.cityId = ''
            this.organizeId = ''

            // 选择大区时请求目录
            this.getTree()
        },
        // 获取城市
        getCityList(){
            let params = {
                areaIds: this.regionId
            }
            getCity(params).then((res)=>{
                if(res.success){
                    this.cityList = res.result.organizeOrgList
                    if(this.cityList.length === 1){
                        this.cityId = res.result.organizeOrgList[0].id
                        this.code = res.result.organizeOrgList[0].code
                        if(this.grade === 2 ){
                            this.getHierarchy()
                            this.getTree()
                        }
                        if(this.grade === 3){
                            this.getWarehouseList()
                        }
                    }
                }
            })
        },
        // 选择城市
        cityChange(value){
            this.cityId = value
            for(var item of this.cityList) {
                if(item.id === this.cityId) {
                    this.code = item.code
                }
            }

            if(this.grade === 3){
                this.getWarehouseList()
            }
            
            this.organizeId = ''

            // 选择城市时请求目录
            this.getTree()
        },
        // 获取仓库
        getWarehouseList(){
            let params = {
                cityIds: this.cityId
            }
            getWarehouse(params).then((res)=>{
                if(res.success){
                    this.warehouseList = res.result.organizeOrgList
                    if(this.warehouseList.length === 1){
                        this.organizeId = res.result.organizeOrgList[0].id
                        this.code = res.result.organizeOrgList[0].code
                        if(this.grade === 3 ){
                            this.getHierarchy()
                        }
                    }
                }
            })
        },
        // 选择仓库
        warehouseChange(value){
            this.organizeId = value
            for(var item of this.warehouseList) {
                if(item.id === this.organizeId) {
                    this.code = item.code
                }
            }

            // 选择仓库时请求目录
            this.getTree()
        },
        
        // 搜索
        onSearch() {
            this.data = []

            // 搜索条件必填控制
            if(this.grade === 1){
                if( this.regionId === '' ){
                    this.$message.warning('搜索时必须先选择大区！')
                }else{
                    this.getHierarchy()
                }
            }else if(this.grade === 2){
                if( this.regionId === '' || this.cityId === '' ){
                    this.$message.warning('搜索时必须先选择大区和城市！')
                }else{
                    this.getHierarchy()
                }
            }else if(this.grade === 3){
                if( this.regionId === '' || this.cityId === '' || this.organizeId === '' ){
                    this.$message.warning('搜索时必须先选择大区、城市和仓库！')
                }else{
                    this.getHierarchy()
                }
            }else{
                this.getHierarchy()
            }
            // 搜索时清空选择项
            this.selectNumber = 0
            this.selectedRowKeys = []
            this.deletdBtnShow = false
        },
        // 重置
        onReset() {
            this.regionId = ''
            this.cityId = ''
            this.organizeId = ''
            this.meterName = ''
            this.total = 0
            this.data = []
            this.selectNumber = 0
            this.selectedRowKeys = []
            this.deletdBtnShow = false
        },
        // 获取树选择文件夹层级
        getTree() {
            let params = {
                grade: this.grade,
                code: this.code,
            }
            getHierarchy(params).then((res)=>{
                if(res.success && res.result){
                    // 遍历过滤文件，只留下目录
                    const filterMenu = (menuList) => {
                        return menuList.filter(item => {
                            return item.type === "0"
                        }).map(item => {
                            item = Object.assign({}, item)
                            if (item.chartCatalogList) {
                                item.chartCatalogList= filterMenu(item.chartCatalogList)
                            }
                            return item
                        })
                    }
                    this.treeData = filterMenu(res.result)   
                }
            })
        },
        // 获取文件夹仪表板层级
        getHierarchy(){
            let params = {
                grade: this.grade,
                code: this.code,
                name: this.meterName,
            }
            this.tableLoading = true
            getHierarchy(params).then((res)=>{
                this.tableLoading = false
                if(res.success){
                    if(res.result){
                        this.data = res.result
                    }
                }else{
                    this.data = []
                    this.$message.warning(res.message)
                }
            })
        },
        // 自定义展开图标
        expandIcon(props){
            if (props.record.type && props.record.chartCatalogList){
                if(props.record.type === '0'){
                    if(props.record.chartCatalogList.length > 0){
                        if (props.expanded) {
                            return <a style="margin-right:5px" onClick={e=> {
                                props.onExpand(props.record, e);
                            }}><a-icon type="minus-square" style="fontSize:16px;"/>&nbsp; <a-icon type="folder" style="fontSize:16px;"/></a>
                        } else{
                            return <a style="margin-right:5px" onClick={e => {
                                props.onExpand(props.record, e);
                            }}><a-icon type="plus-square" style="fontSize:16px;"/>&nbsp; <a-icon type="folder" style="fontSize:16px;"/></a>
                        }
                    }else{
                        return <a style="margin-right:5px" onClick={e=> {
                            props.onExpand(props.record, e);
                        }}><a-icon type="folder" style="fontSize:16px;"/></a>
                    }
                }else{
                    return <a style="margin-right:5px" onClick={e=> {
                        props.onExpand(props.record, e);
                    }}><a-icon type="file-text" style="fontSize:16px;color:#458EF3;"/></a>
                }
            }
        },
        
        // 新建仪表板
        newMeter() {
            if(this.grade === 1){
                if(this.regionId){
                    this.visible = true;
                    this.nameText = ''
                    this.treeValue = ''
                    this.parentId = ''
                    this.confirmLoading = false;
                }else{
                    this.$message.warning('新建仪表板前请先选择大区！')
                }
            }else if(this.grade === 2){
                if(this.regionId && this.cityId){
                    this.visible = true;
                    this.nameText = ''
                    this.treeValue = ''
                    this.parentId = ''
                    this.confirmLoading = false;
                }else{
                    this.$message.warning('新建仪表板前请先选择大区和城市！')
                }
            }else if(this.grade === 3){
                if(this.regionId && this.cityId && this.organizeId){
                    this.visible = true;
                    this.nameText = ''
                    this.treeValue = ''
                    this.parentId = ''
                    this.confirmLoading = false;
                }else{
                    this.$message.warning('新建仪表板前请先选择大区、城市和仓库！')
                }
            }else{
                this.visible = true;
                this.nameText = ''
                this.treeValue = ''
                this.parentId = ''
                this.confirmLoading = false;
            }
            
        },
        handleOk(e) {
            if(this.nameText === ''){
                this.$message.warning('请先输入仪表板名称！')
            }else{
                this.confirmLoading = true;
                let params = {
                    grade: this.grade,
                    code: this.code,
                    name: this.nameText,
                    type: 1,
                    parentId: this.parentId,
                }
                createMeter(params).then((res)=>{
                    if(res.success && res.result){
                        this.visible = false;
                        this.confirmLoading = false;
                        this.getHierarchy()
                        this.getTree()
                        // 新建仪表板成功后跳转到仪表板页面
                        let routeData = this.$router.resolve({
                            name: "NewMeter",
                            query: {grade: this.grade, code: this.code, catalogId: res.result, title: this.nameText, regionId: this.regionId, cityId: this.cityId, organizeId: this.organizeId}
                        });
                        window.open(routeData.href, '_blank');
                    }else{
                        this.$message.warning(res.message)
                    }
                })
            }
            
        },
        handleCancel(e) {
            this.visible = false;
        },
        
        // 文件夹树选择
        treeChange(value) {
            if(value){
                this.parentId = value
            }else{
                this.parentId = ''
            }

            // 当选择的目录改变时重置按钮状态
            this.moveConfirmLoading = false;
        },
        // 新建文件夹
        newFolder() {
            if(this.grade === 1){
                if(this.regionId){
                    this.folderVisible = true;
                    this.folderNameText = ''
                    this.treeValue = ''
                    this.parentId = ''
                    this.folderConfirmLoading = false;
                }else{
                    this.$message.warning('新建文件夹前请先选择大区！')
                }
            }else if(this.grade === 2){
                if(this.regionId && this.cityId){
                    this.folderVisible = true;
                    this.folderNameText = ''
                    this.treeValue = ''
                    this.parentId = ''
                    this.folderConfirmLoading = false;
                }else{
                    this.$message.warning('新建文件夹前请先选择大区和城市！')
                }
            }else if(this.grade === 3){
                if(this.regionId && this.cityId && this.organizeId){
                    this.folderVisible = true;
                    this.folderNameText = ''
                    this.treeValue = ''
                    this.parentId = ''
                    this.folderConfirmLoading = false;
                }else{
                    this.$message.warning('新建文件夹前请先选择大区、城市和仓库！')
                }
            }else{
                this.folderVisible = true;
                this.folderNameText = ''
                this.treeValue = ''
                this.parentId = ''
                this.folderConfirmLoading = false;
            }
            
        },
        folderHandleOk(e) {
            if(this.folderNameText === ''){
                this.$message.warning('请先输入文件夹名称！')
            }else{
                this.folderConfirmLoading = true;
                let params = {
                    grade: this.grade,
                    code: this.code,
                    name: this.folderNameText,
                    type: 0,
                    parentId: this.parentId,
                }
                createMeter(params).then((res)=>{
                    if(res.success){
                        this.folderVisible = false;
                        this.folderConfirmLoading = false;
                        this.getHierarchy()
                        this.getTree()
                    }else{
                        this.$message.warning(res.message)
                    }
                })
            }
            
        },
        folderHandleCancel(e) {
            this.folderVisible = false;
        },
        // 点击名字进去查看
        lookRow(record) {
            // 只有当前是仪表板才能查看
            if(record.type === '1'){
                let routeData = this.$router.resolve({
                    name: "NewMeter",
                    query: {grade: this.grade, code: this.code, catalogId: record.id, title: record.name, previewMode: true, regionId: this.regionId, cityId: this.cityId, organizeId: this.organizeId}
                });
                window.open(routeData.href, '_blank');
            }
            
        },
        // 重命名当前行
        renameRow(record) {
            this.renameVisible = true
            this.renameText = record.name
            this.ids = record.id
            this.renameConfirmLoading = false;
        },
        renameHandleOk(e) {
            this.renameConfirmLoading = true;
            let params = {
                ids: this.ids,
                name: this.renameText,
                type: 0,
            }
            updateMeter(params).then((res)=>{
                if(res.success){
                    this.renameVisible = false;
                    this.renameConfirmLoading = false;
                    this.getHierarchy()
                    this.getTree()
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        renameHandleCancel(e) {
            this.renameVisible = false;
        },
        // 删除当前行
        deleteRow(record) {
            this.deleteVisible = true      
            this.ids = record.id
        },
        deleteHandleOk(e) {
            this.deleteConfirmLoading = true;
            let params = {
                ids: this.ids,
            }
            deleteMeter(params).then((res)=>{
                if(res.success){
                    this.deleteVisible = false;
                    this.deleteConfirmLoading = false;
                    this.getHierarchy()
                    this.getTree()
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        deleteHandleCancel(e) {
            this.deleteVisible = false;
        },
        setHomepage(record) {
            let params = {
                catalogId: record.id,
            }
            setHomepage(params).then((res)=>{
                if(res.success){
                    this.deleteVisible = false;
                    this.deleteConfirmLoading = false;
                    this.getHierarchy()
                    this.$message.success('设置首页成功，当前用户需要重新登录该设置才能生效！')

                    var homeInfo = {
                        regionId: this.regionId,
                        cityId: this.cityId,
                        organizeId: this.organizeId
                    }
                    localStorage.setItem('homeInfo', JSON.stringify(homeInfo))
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        // 进入仪表板详情
        detailsRow(record) {
            let routeData = this.$router.resolve({
                name: "NewMeter",
                query: {grade: this.grade, code: this.code, catalogId: record.id, title: record.name, previewMode: false, regionId: this.regionId, cityId: this.cityId, organizeId: this.organizeId}
            });
            window.open(routeData.href, '_blank');
        },
        // 获取当前页数、条数
        pageChange(data1, data2) {
            this.pageNo = data1
            this.pageSize = data2
        },
        // 获取当前页数、条数
        sizeChange(data1, data2) {
            this.pageNo = data1
            this.pageSize = data2
        },
        // 选中
        onSelectChange(selectedRowKeys) {
            this.selectedRowKeys = selectedRowKeys
            this.selectNumber = selectedRowKeys.length
            if(this.selectedRowKeys.length > 0){
                this.deletdBtnShow = true
            }else{
                this.deletdBtnShow = false
            }
        },
        // 清空选中
        clearSelect() {
            this.selectNumber = 0
            this.selectedRowKeys = []
            this.deletdBtnShow = false
        },
        // 批量移动
        batchMoveRow() {
            this.moveVisible = true;
            this.ids = this.selectedRowKeys.join(',')
            this.parentId = ''
            this.treeValue = ''
            this.moveConfirmLoading = false;
        },
        // 批量删除
        batchDelete() {
            this.batchDeleteVisible = true
            this.ids = this.selectedRowKeys.join(',')
        },
        batchDeleteHandleOk(e) {
            this.batchDeleteConfirmLoading = true;
            let params = {
                ids: this.ids,
            }
            deleteMeter(params).then((res)=>{
                if(res.success){
                    this.batchDeleteVisible = false;
                    this.batchDeleteConfirmLoading = false;
                    this.selectNumber = 0
                    this.selectedRowKeys = []
                    this.deletdBtnShow = false
                    this.getHierarchy()
                    this.getTree()
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        batchDeleteHandleCancel(e) {
            this.batchDeleteVisible = false;
        },
        // 移动
        moveRow(record) {
            this.moveVisible = true;
            this.ids = record.id
            this.parentId = ''
            this.treeValue = ''
            this.moveConfirmLoading = false;
        },
        moveHandleOk(e) {
            this.moveConfirmLoading = true;
            
            let params = {
                ids: this.ids,
                parentId: this.parentId,
                type: 1,
            }
            updateMeter(params).then((res)=>{
                if(res.success){
                    this.moveVisible = false;
                    this.moveConfirmLoading = false;
                    this.selectNumber = 0
                    this.selectedRowKeys = []
                    this.deletdBtnShow = false
                    this.getHierarchy()
                    this.getTree()
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        moveHandleCancel(e) {
            this.moveVisible = false;
        },
        // 移动时选择文件夹
        onSelect(keys, event) {
            console.log('Trigger Select', keys, event);
        },
        onExpand() {
            console.log('Trigger Expand');
        },
    },
}
</script>

<style lang="less" scoped>
    .meterIndex{
        width: 100%;
        padding: 0 10px 10px 10px;
        font-style: Microsoft YaHei;
        font-size: 14px;
        background: #ffffff;
        .top_operation_first{
            width: 100%;
            overflow: hidden;
            margin-bottom: 10px;
            .every_operation{
                float: left;
                margin-top: 10px;
                margin-right: 20px;
                span{
                    display: inline-block;
                    width: 85px;
                }
            }
            .button_div{
                float: left;
                margin-top: 10px;
            }
        }
        
        .top_select{
        padding: 10px;
        overflow: hidden;
            .button_div{
                float: left;
            }
        }
        .select_number{
            width: 100%;
            height: 36px;
            padding-left: 20px;
            margin-bottom: 10px;
            box-sizing: border-box;
            background: rgba(57, 72, 103, .22);
            line-height: 36px;
            .number_span{
                color: #ffffff;
                margin-right: 30px;
                b{
                    color: #394867;
                    margin: 0 15px;
                }
            }
            .clear_span{
                cursor: pointer;
                color: #394867;
            }
        }
        .top_operation{
            width: 100%;
            height: 50px;
            display: flex;
            div{
                line-height: 50px;
                margin-left: 20px;
                cursor: pointer;
                position: relative;
                padding-left: 20px;
                img{
                    width: 18px;
                    position: absolute;
                    top: 16px;
                    left: 0;
                }
            }
            .search_meter{
                flex: 1;
                text-align: right;
                margin-right: 20px;
            }
        }
        .sort_operation{
            width: 100%;
            height: 50px;
            background: #ebf3fe;
            line-height: 50px;
            padding: 0 20px;
            position: relative;
            .choice_sort_way{
                position: absolute;
                top: 0;
                right: 20px;
                p{
                    position: absolute;
                    top: 0;
                    left: -70px;
                }
            }
        }
        .meter_list{
            overflow: hidden;
        }
    }
</style>